<template>
	<view>
		<swiper-banner :swipers="goodsBanner" :perview="true" height="800"></swiper-banner>
		<base-info :detail="detail" :pprice="checkedGoodsSkusPrice"></base-info>
		<scroll-attrs :attrs="goodsAttrs"></scroll-attrs>
		<view class="pop">
			<view class="popup d-flex a-center">
				<view class="list">
					<view class="choosed my-1" @click="popup('attr1')">
						<text>已选</text>
						<text>{{checkedGoodsSkus}}</text>
					</view>
					<view class="run my-2" @click="popup('attr2')">
						<text>配送</text>
						<text>北京 东城区 现配</text>
					</view>
					<view class="d-flex a-center m-1" @click="popup('attr3')">
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米自营
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米发货
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							七天无理由退货
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="" @touchmove.stop.prevent="disabledScroll">
			<uni-popup ref="popup1" type="bottom" border-radius="20px 20px 0 0">
				<view class="pop-height">
					<view class="content">
						<view class="body">
							<view class="d-flex a-center popup">
								<image :src="detail.cover" mode="m-2"></image>
								<view>
									<p-price>
										<template #newPrice>
											<text class="pprice">￥<text>
													{{checkedGoodsSkusPrice}}
												</text></text>
										</template>
									</p-price>
									<view class="skus my-2">
										{{checkedGoodsSkus}}
									</view>
								</view>
							</view>
							<view class="number">

								<one-adv v-for="(select,index) in selects" :key="index" :title="select.title">
									<color-tag v-for="(item,k) in select.list" :item="item" :key="k"
										:bool="select.selected==k" @click.native="changeIndex(index,k)"></color-tag>
								</one-adv>
							</view>
							<view class="number d-flex j-sb">
								<text class="tit">
									购买数量：
								</text>
								<uni-number-box :min="0" :max="10" @change="getNum" v-model="stockval">
								</uni-number-box>
							</view>
							<view class="go-cart" @click="goCart">
								加入购物车
							</view>
							<!-- <view class="go-cart stock-bg-color" v-else>
								暂无库存
							</view> -->
						</view>
					</view>
				</view>

			</uni-popup>
			<uni-popup ref="popup2" type="bottom" border-radius="10px 10px 0 0">
				<view class="pop-height">
					<view class="content">
						<view class="body">
							<scroll-view scroll-y="true" style="height: 700rpx;">
								<view class="swiper-action">
									<uni-swipe-action ref="unaction">
										<uni-swipe-action-item :right-options="options" @click="onClick($event,index)"
											@change="swipeChange($event, index)" v-for="(item,index) in listaddress"
											:key="index">
											<view>{{item.name}}-{{item.city}}-{{item.address}}</view>
										</uni-swipe-action-item>
									</uni-swipe-action>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="go-cart" @click="goAddress">
						添加新地址
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup3" type="bottom" border-radius="10px 10px 0 0">
				<view class="pop-height">
					<view class="content">
						<view class="body">
							4548156154
						</view>
					</view>
				</view>

			</uni-popup>
		</view>
		<u-parse :content="article" @preview="preview" @navigate="navigate"></u-parse>
	</view>
</template>

<script>
	import {
		getDetail
	} from '@/api/index.js';
	import uParse from '@/components/u-parse/u-parse.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			uParse
		},
		computed: {
			...mapState({
				listaddress: state => state.address.List
			}),
			checkedGoodsSkus() {
				let checkedgoodsskus = this.selects.map(v => {
					return v.list[v.selected].name
				})
				return checkedgoodsskus.join(',')
			},
			checkedGoodsSkusIndex() {
				if (this.detail.goodsSkus) {
					let index = this.detail.goodsSkus.findIndex(v => {
						return v.skustext == this.checkedGoodsSkus
					})
					console.log('index', index);
					return index;
				} else {
					return -1
				}
			},
			checkedGoodsSkusPrice() {
				if (this.detail.goodsSkus) {
					return this.detail.goodsSkus[this.checkedGoodsSkusIndex].pprice
				} else {
					return 100
				}
			}
		},
		data() {
			return {
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				id: '',
				detail: [],
				goodsBanner: [],
				goodsAttrs: [],
				article: `<img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
												<img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
												<img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
												<img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
												<img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
												<img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
												<img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">`,
				selects: []
			}
		},
		methods: {
			...mapMutations(['getAddressDel']),
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			onClick(e, i) {
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
				if (e.index == 0) {
					uni.navigateTo({
						url: `/pages/address/address?key=${i}`
					})
				} else {
					this.getAddressDel(i)
				}
				this.$refs.unaction.closeAll()
			},
			change(event) {
				console.log('改变事件', event);
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			},
			changeIndex(index, k) {
				this.selects[index].selected = k
			},
			//详情页图片预览
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			popup(attr) {
				if (attr == 'attr1') {
					this.$refs.popup1.open('bottom')
				} else if (attr == 'attr2') {
					this.$refs.popup2.open('bottom')
				} else {
					this.$refs.popup3.open('bottom')
				}
			},
			getdetail() {
				getDetail(this.id).then(res => {
					console.log('res=>', res);
					this.detail = res.data
					this.goodsBanner = res.data.goodsBanner
					this.goodsAttrs = res.data.goodsAttrs
					this.selects = this.formatter(res.data.goodsSkusCard);
					this.detail.goodsSkus.map(v => {
						let arr = [];
						for (let i in v.skus) {
							arr.push(v.skus[i].value)
						}
						v.skustext = arr.join(',')
					})
				})
			},
			//格式化数组
			formatter(res) {
				return res.map(item => {
					var selectlist = item.goodsSkusCardValue.map(v => {
						return {
							id: v.id,
							name: v.value
						}
					})
					return {
						selected: 0,
						title: item.name,
						id: item.id,
						list: selectlist
					}

				})
			},
			disabledScroll() {
				return false
			}
		},
		onLoad(e) {
			console.log(e);
			this.id = e.key
		},
		mounted() {
			this.getdetail()
		}
	}
</script>

<style scoped>
	@import url("@/components/u-parse/u-parse.css");

	.pop {
		width: 750rpx;
		height: 300rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.popup {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
	}

	.list {
		margin: 0 0 0 20rpx;
	}

	>>>.wxParse {
		margin: 0;
		padding: 0;
		line-height: 0;
	}

	.pop-height {
		width: 750rpx;
		height: 800rpx;
		background-color: #fff;
		position: relative;
	}

	.pop-height image {
		width: 150rpx;
		height: 150rpx;
	}

	.pop-height .content {
		padding: 0 20rpx;
	}

	.pprice {
		color: #f60;
	}

	.pprice text {
		font-size: 40rpx;
		font-weight: 900;
	}

	.go-cart {
		position: absolute;
		bottom: 20rpx;
		left: 35rpx;
		background-color: #f60;
		color: #fff;
		width: 680rpx;
		height: 88rpx;
		border-radius: 44rpx;
		;
		text-align: center;
		line-height: 88rpx;
	}

	.skus,
	.pprice {
		margin-left: 20rpx;
	}

	.swiper-action {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0;
		margin: 0;
	}
</style>